<div class="layui-form" lay-filter="layuiadmin-form-role" id="form">
	<div class="form-cont">
		<div class="layui-form-item verify">
		  <label class="layui-form-label">角色名称</label>
		  <div class="layui-input-block">
			  <input type="text" lay-verify="required" autocomplete="off" verify='requirel2' v-model="detail.role_name" placeholder="请输入角色名称" class="layui-input">
			  <span class="hint">角色名称必填</span>
			</div>
		</div>
		<!-- <div class="layui-form-item">
		  <label class="layui-form-label">权限范围</label>
		  <div v-for="(x,index) in qx" @click="checkF(x,index)" class="layui-unselect layui-form-checkbox" :class="{'layui-form-checked':x.check}" lay-skin="primary"><span>{{x.module_name}}</span><i class="layui-icon layui-icon-ok"></i></div>
		</div> -->
		<div class="layui-form-item verify">
		  <label class="layui-form-label">角色介绍</label>
		  <div class="layui-input-block">
		      <textarea type="text" class="layui-textarea" v-model="detail.description" verify='require'></textarea>
				<span class="hint">角色介绍必填</span>
		  </div>
		</div>
		<div class="layui-form-item">
		  <label class="layui-form-label">角色状态</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.role_status==1}" lay-skin="_switch" @click="radioF()"><em>{{detail.role_status==1?'启用':'停用'}}</em><i></i></div>
		  </div>
		</div>
	</div>
  
  <div class="form-btn" v-if="type!=3">
      <input type="button" value="保存" class="layui-btn" @click="submit">
  </div>
</div>

<script>
	layui.use(['form'], function(){
	  var $ = layui.$
	  ,form = layui.form;
	  var form=new Vue({
	  		el:'#form',
	  		data:{
	  			detail:{
					role_status:1
				},
				old_detail:{},
	  			qx:[],
				type:layui.admin.objData.type
	  		},
	  		created() {
				//初始化
	  			if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail);
	  			/* layui.admin.ajax('role/auth_list',{},1).then((res)=>{
	  				this.qx=res.data;
					if(this.role.module_id_array){
						for(var i=0; i<this.qx.length; i++){
							if(this.role.module_id_array.indexOf(this.qx[i].module_id)!=-1){
								this.$set(this.qx[i],'check',true);
							}
						}
					}
	  			}).catch((res)=>{}); */
				//提交form
				var _this=this;
				/* form.on('submit(form-submit)',function(data){
					delete _this.role.role_array;
					for(var i=0; i<_this.qx.length; i++){
						if(_this.qx[i].check){
							if(_this.role.role_array){
								_this.role.role_array+=','+_this.qx[i].module_id
							}else{
								_this.role.role_array=_this.qx[i].module_id
							}
						}
					}
					if(!_this.role.role_array){
						layer.msg('请选择权限范围',{icon:2})
						return false;
					}
					Object.assign(_this.role,data.field);
					if(_this.type==2){   //编辑
						var old_detail=JSON.parse(_this.old_detail),data={};
						for(var i in _this.role){
							if(_this.role[i]!=old_detail[i]||i=='role_id'){
								data[i]=_this.role[i];
							}
						}
						layui.admin.formapi('role/save',data);
					}else{  //添加
						layui.admin.formapi('role/add',_this.role);
					}
				}) */
	  		},
	  		methods:{
				radioF(){//radio选择
					this.detail.role_status==1?this.detail.role_status=2:this.detail.role_status=1;
				},
				submit(){
					if(layui.admin.form('#form')){
						if(this.type==2){   //编辑
							var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'role_id');
							if(data){
								layui.admin.formapi('role/update',data);
							}
						}else{  //添加
							layui.admin.formapi('role/add',this.detail);
						}
					}
				}
	  		}
	  	})
	});
</script>
